<template>
	<view class="animated fadeIn">
		<scroll-view v-if="component=='scroll-view'" class="container" scroll-y :scroll-top="scrollTop" @scrollToTop="scrollToTop" :style="[containerStyles]" @scrolltolower="scrolltolower" @scroll="scroll" scroll-with-animation scroll-anchoring>
			<view class="">
				<slot></slot>
			</view>
		</scroll-view>
		<view v-else class="container" :style="[containerStyles]">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		data() {
			return {
				// #ifndef MP-WEIXIN
				navbarHeight: 44 + systemInfo.statusBarHeight,
				// #endif
				// #ifdef MP-WEIXIN
				navbarHeight: menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight,
				// #endif
				getWindowInfo:null,
			}
		},
		props: {
			isTabbar:{
				default:false,
				type:Boolean
			},
			'tabbar-height':{
				default:80,
				type:Number
			},
			isNavbar:{
				default:true,
				type:Boolean
			},
			component:{
				default:'scroll-view',
				type:String
			},
			'scroll-top':{
				default:0,
				type:Number
			},
		},
		created() {
			this.getWindowInfo = uni.getWindowInfo()
		},
		computed: {
			containerStyles(){
				let screenTop = this.getWindowInfo.screenTop
				let height = this.getWindowInfo.windowHeight
				if(this.isTabbar){
					height -= this.tabbarHeight
				}
				if(this.isNavbar){
					height -= this.navbarHeight
				}
				console.log(height,'height==========height')
				return {
					height:`${height}px`,
				}
			}
		},
		methods: {
			scroll(e){
				this.$nextTick(()=>{
					this.$emit('update:scrollTop', e.detail.scrollTop)
				})
			},
			scrolltolower(){
				console.log('w-container组件到达底部')
				this.$emit('scrolltolower')
			},
			scrollToTop(){
				this.$emit('scrollToTop')
			}
		}
	}
</script>

<style scoped>
	.container{
		width: 100vw;
		position: relative;
		overflow: hidden;
	}
</style>